<template>
	<view class="photo_content" @scroll="onPageScroll" :class="'theme' +'_'+ infrom.theme_id">
		
		
		<view class="header_cover">
			<img class="banner" :src="infrom.live_cover">
		</view>
		
		
		<view class="photo_contentbox">
			<!-- 标题 -->
			<view class="photo_title page">
				<text class="ellipsis2">{{ infrom.title }}</text>
				<view class="status_row">
					<view class="status">{{infrom.live_status == 1 ? '直播中':'待开播'}}</view>
					<view class="views">{{ infrom.real_view_count }} <text>热度</text></view>
					<view class="detail" @click="details">
						<text>活动详情</text>
					</view>
				</view>
				<view class="time"><i
						class="iconfont iconshijian1"></i><text>{{ convertTimestamp(infrom.start_at)}}</text>
				</view>
				<view class="location"><i class="iconfont icondizhi"></i><text>{{infrom.address}}</text></view>
			</view>

			<!-- 筛选 -->
			<view @scroll="handleScroll" class="tab_area" :class="{ 'show': show ,'sticky_is':isSticky,'sticky':true}">
				<view class="pic_tab">
					<u-tabs :list="tabsList" :activeStyle="{'color':'#006cff'}" lineColor="#006cff" :is-scroll="false"
						:current="current" @click='tabSumbit'></u-tabs>
					<view class="sort">
						<view>
							<i class="sort_btn piciconfont" :class="{ 'icon-daoxu': sort, 'icon-zhengxu': !sort }"
								@click="onSort"></i>
						</view>
						<view>
							<i class="sort_btn piciconfont icon-gongge" @click="onToggleShow"></i>
						</view>
					</view>
				</view>
				<view :class="{ 'drop_menu': true, 'show': show }">
					<ul class="sort_row">
						<li v-for="(item,index) in imgList2" :key="item.id"
							:class="{ 'on_sort_row': imgSortIndex == index}" @click="format(item,index)">
							<i class="sort_btn piciconfont" :class="item.icon"></i>
							<p>{{item.name}}</p>
						</li>
					</ul>

					<ul class="list_style">
						<li v-for="(item,index) in imgList" :key="item.id" :class="{'on':imgIndex === index}"
							@click="getListType(index)">
							<i class="piciconfont " :class='item.icon'></i>
							<p>{{item.name}}</p>
						</li>

					</ul>
				</view>
				<view class="pic_type">
					<view :class="{ 'type_item': true, 'on': item.id == curId }" v-for="item in categoryList"
						@click="tabSwitch(item.id)" :key="item.id">{{ item.name }}</view>
				</view>
			</view>
			<!-- 图片列表  宫格-->
			<view class="list_wrapper" v-if="imgIndex == 0">
				<!-- <u-list> -->
				<view class="list_images">
					<view v-for="(item, index) in photoList" :key="item.id"
						:class="{'purchased':item.is_buy,'flex-s': true, 'check_btn': down.isDown,  'xz': seleList.includes(item.id) }">
						<img :src="item.file_path" alt="" @click="preview(item, index)" />
					</view>
				</view>
				<u-empty v-if="!photoList.length" mode="list" icon="http://cdn.uviewui.com/uview/empty/data.png"
					text='暂无数据'>
				</u-empty>
				<view class="load_all" v-if="photoList.length">- 已经到底了哦 -</view>
				<!-- 蒙版 -->
				<view class="shadow" @click="show =false" v-if="show"></view>
				<!-- </u-list> -->
			</view>

			<!-- 瀑布流 -->
			<view class="Waterfall_flow" v-if="imgIndex == 1">
				<wContainer :columnNumber="columnNumber" :columnSpacing='columnSpacing'>
					<wItem v-for="(item, index) in photoList" :key="index">
						<view class="box">
							<image class="image"
								:class="{'purchased':item.is_buy,'flex-s': true, 'check_btn': down.isDown,  'xz': seleList.includes(item.id) }"
								:src="item.file_path" mode="widthFix" @click="preview(item, index)"></image>
							<!-- <view class="title">323232</view> -->
						</view>

					</wItem>
				</wContainer>
				<u-empty v-if="!photoList.length" mode="list" icon="http://cdn.uviewui.com/uview/empty/data.png"
					text='暂无数据'>
				</u-empty>
				<!-- 蒙版 -->
				<view class="shadow" @click="show =false" v-if="show"></view>
				<view class="load_all" v-if="photoList.length">- 已经到底了哦 -</view>

			</view>



			<!-- 拼接 -->
			<view class="list_montage" v-if="imgIndex == 2">
				<view>
					<view class="list_images">
						<view v-for="(item, index) in photoList" :key="item.id"
							:class="{'purchased':item.is_buy,'flex-s': true, 'check_btn': down.isDown,  'xz': seleList.includes(item.id) }">
							<img :src="item.file_path" alt="" @click="preview(item, index)" />
						</view>
					</view>
					<u-empty v-if="!photoList.length" mode="list" icon="http://cdn.uviewui.com/uview/empty/data.png"
						text='暂无数据'>
					</u-empty>
					<view class="load_all" v-if="photoList.length">- 已经到底了哦 -</view>
					<!-- 蒙版 -->
					<view class="shadow" @click="show =false" v-if="show"></view>
				</view>
			</view>






			<!-- 时间排序列表 -->
			<view class="time_sorting" v-if="imgIndex == 3">
				<view class="terBox">
					<view class="m-timeline" v-for="(desc, index) in timestampList" :key="index">
						<text class="desc-time">{{desc.time}}</text>
						<view v-for="(valuess, keys) in desc.sjd"
							:class="['m-timeline-item', {'last': index === desc.sjd.length - 1}]">
							<view class="u-tail"></view>
							<view class="u-dot"></view>
							<view class="u-content">
								<text>{{keys}}</text>
								<view class="ater-flex">
									<view class="list_images">
										<view v-for="it in valuess" :key="it.id"
											:class="{'purchased':it.is_buy,'flex-s': true, 'check_btn': down.isDown,  'xz': seleList.includes(it.id) }">
											<img :src="it.url" alt="" @click="preview(it, index)" />
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<u-empty v-if="!photoList.length" mode="list" icon="http://cdn.uviewui.com/uview/empty/data.png"
						text='暂无数据'>
					</u-empty>
					<view class="load_all" v-if="photoList.length">- 已经到底了哦 -</view>
					<!-- 蒙版 -->
					<view class="shadow" @click="show =false" v-if="show"></view>
				</view>
			</view>






			<view class="check_footer" v-if="down.isDown">
				<view class="down-tips" v-if='+infrom.photo_price'> 付费明细:
					单张图片{{infrom.photo_price}}元，总共选中{{seleList.length}}张，已包含可免费下载{{seleLists.length}}张 </view>
				<view class="row g_max">
					<view class="cancel" @click="closeImg"><u-icon name="close" size="24"></u-icon>取消</view>
					<view class="d-flex btn-wrap-outer" v-if='+infrom.photo_price'>
						<view class="free-download"><!---->
							<view class="btn-down" @click="freeDownload">
								<view class="btn-text">免费下载</view>
								<view class="sub-text">有水印</view>
							</view>
						</view>
						<view class="pay-download" @click="paidDownloads">
							<view class="btn-down">
								<view class="btn-text">
									共{{((seleList.length - seleLists.length) * infrom.photo_price).toFixed(2)}}元
								</view>
								<view class="sub-text">高清无水印原图</view>
							</view>
						</view>
					</view>
					<view class="d-flex btn-wrap-outer m-btn-wrap" v-if='!(+infrom.photo_price)'>
						<view class="btn-down" @click="freeDownload">
							<view class="btn-text">免费下载</view>

						</view>
					</view>
				</view>
			</view>

		</view>



		<!-- 悬浮球 -->
		<view id="right_bar" v-show="!down.isDown">
			<view :class="{ 'open': isShow, 'fold_list': true }" :style="dynamicStyle">
				<view class="tool_wrap" v-if="isShow">
					<view class="icon_item" @click="getCart">
						<i class="piciconfont icon-gouwuche"></i>
						<view>购物车</view>
					</view>
					<view class="icon_item" @click="downImg"><i class="piciconfont icon-xiazai1"></i>
						<view>下载</view>
					</view>
					<view class="icon_item" @click="facialSearch"><i class="piciconfont icon-zhaoren1"></i>
						<view>找人</view>
					</view>
					<view class="icon_item" @click="personalCenter"><u-icon name="account" color="#2979ff"
							size="24"></u-icon>
						<view>我的</view>
					</view>
				</view>
				<view class="fix_btn" @click="closeBar">
					<u-icon name="arrow-up" color="#2979ff" size="20"></u-icon>
				</view>
			</view>
		</view>
		<!-- 活动详情 -->
		<u-popup :show="isDetails" :round="20" mode="bottom" @close="isDetails = false">
			<view class="introduce g_scroll">
				<view class="title popup">
					<h1 class="ellipsis2">{{ infrom.title }}</h1>
					<view class="status_row">
						<view class="status">{{infrom.live_status == 1 ? '直播中':'待开播'}}</view><text
							class="views">{{ infrom.real_view_count }}<text>热度</text></text>
					</view>
				</view>
				<view class="info"></view>
				<view class="introducez">
					<view class="introduces-content" v-html="infrom.html_content1"></view>
				</view>
				<view class="complain"><a>举报反馈</a></view>
			</view>
		</u-popup>

		<!-- 购物车 -->
		<!-- 购物车弹框 -->
		<u-popup :show="cartInfrom.isCart" mode="bottom" :round="20" @close="cartInfrom.isCart = false">
			<view class="cart_box">
				<view class="header">
					<h1>购物车</h1>
					<p class="action" @click="cartInfrom.isCartEdit = !cartInfrom.isCartEdit"
						v-if="cartInfrom.isCartEdit">管理</p>
				</view>
				<u-collapse :value="['1']">
					<u-collapse-item class="open-flag" :title="'图片'+ cartList.length +'张'" name="1">
						<scroll-view scroll-y="true" style="height: 460rpx;">
							<view class="list_wrappers " v-if="cartList.length">
								<view class="list_img image-container">
									<view :class="{ 'active': selectedImages.includes(item.id) }"
										v-for="(item, index) in cartList" :key="item.url"
										@click="toggleSelectImage(item.id)">
										<img :src="item.url" mode=""></img>
									</view>
								</view>
							</view>
							<view class="empty_tip" v-else>空空的购物车</view>
						</scroll-view>
					</u-collapse-item>
				</u-collapse>
				<view class="footer" v-if="cartInfrom.isCartEdit">
					<view class="price">
						<text class="sum"><text>总金额</text><var>￥{{ cartInfrom.total_price }}</var></text>
						<view class="detail"><text><i>图片总价</i>
								￥{{ cartInfrom.total_price }}</text></view>
					</view>
					<button class="pay" @click="paidDownload">立即支付</button>
				</view>
				<view class="footer" v-else>
					<u-checkbox-group @change="handleClick">
						<u-checkbox shape="circle" label="全选" :checked="cartInfrom.checked">全选</u-checkbox>
					</u-checkbox-group>
					<button class="control" @click="backRet">返回</button>
					<button class="control del" @click="deleteCart">删除</button>
				</view>
			</view>
		</u-popup>

		<!-- 人脸 -->
		<u-popup :show="recognition" mode="bottom" :round="20" @close="recognition = false">
			<view class="face_popup">
				<view class="line"></view>
				<h1>人脸识别</h1>
				<h2>上传TA的脸部图片，快速找到他的身影</h2>
				<h2 style="color: transparent; display: none;">请输入要查找的号码，快速找到他的身影</h2>
				<section class="veriface_wrap">
					<view class="veriface_pic init"><img class="face" :src="recogObj.baseImg"></img></view>
				</section>
				<section class="face_pd">
					<h3>{{recogObj.tips}}</h3>
					<h4>{{recogObj.isDetected}}</h4>
					<view class="upload" @click="findNow"><img class="face" src="../../static/xj.png"></img>
						立即上传</view>
				</section>
				<view class="num-recognition-wrap" style="display: none;"><input type="text" maxlength="20"
						placeholder="请输入要查找的号码，支持数字、字母、汉字" class="num-recognition-input">
					<view class="num-recognition-btn">开始查找</view>
				</view>
			</view>
		</u-popup>



		<!-- 我的 -->
		<u-popup :show="isInform" mode="bottom" :round="20" @close="isInform = false">
			<view class="cart_box">
				<view class="header">
					<h1>我的</h1>
				</view>
				<u-collapse :value="['2']">
					<u-collapse-item title="打赏" name="2">
						<scroll-view scroll-y="true" style="height: 460rpx;">
							<view class="tables">
								<view class="row header">
									<text>打赏金额</text>
									<text>打赏时间</text>
								</view>
								<view class="row" v-for="(item, index) in rewardList" :key="item.order_no">
									<text>{{ item.amount }}</text>
									<text>{{ dateFormat(item.add_time) }}</text>
								</view>
							</view>
						</scroll-view>
					</u-collapse-item>
				</u-collapse>


				<view class="footer" v-if="isPhto">
					<u-checkbox-group @change="photoListClick">
						<u-checkbox v-model="cartInfrom.checked" shape="circle">全选</u-checkbox>
					</u-checkbox-group>
					<button class="control" @click="backPhotoRet">返回</button>
					<button class="control del" @click="downLoads">下载</button>
				</view>
			</view>
		</u-popup>

		<Preview v-if="isPreview" :currents='index' @updateValue="updateValue" :list="photoList"
			@close="isPreview = false" :infrom="infrom" :live_id="options.live_id" />
			
			<u-popup :show="showPopup" mode="center" :round="10" >
				<view style="padding: 18px;">
					<view style="text-align: center;
								font-weight: 600;
								font-size: 15px;">
						请输入观看密码
					</view>
					 <view style="display: flex;">
			          <text style="margin-top: 20px;display: inline-block;">密码：</text>
					  	 <u-input style="margin-top:11px;display: inline-block;"  type="password" shape="circle" placeholder="请输入密码进行观看" v-model="passwordLink" />
					  </view>
			         
					   <text style="display:block;margin-top: 5px;margin-left: 60px;font-size: 11px;color: red;" v-if="redLine">密码错误</text>
			        <button formType="submit" style="margin-top: 15px;
										  			border-radius: 14px;
													width: 80%;
													height: 35px;
													font-size: 14px;
													color:#fff;
													background-color:#0273FD;" @click="submitPassword">进入观看</button>
				</view>
			  </u-popup>
			  <u-popup :show="showPopupLine" mode="center" :round="10" >
			  	<view style="padding: 18px;">
			  		<view style="text-align: center;
			  					font-weight: 600;
			  					font-size: 12px;">
			  			此直播间为付费直播间，请付费后再观看！
			  		</view>
			         <!--   <text style="width: 20%;display: inline-block;margin-top: 15px;">密码：</text>
			            <u-input style="width: 70%;display: inline-block;" type="password" shape="circle" placeholder="请输入密码进行观看" v-model="passwordLink" />
			  		   <text style="display:block;margin-top: 5px;margin-left: 60px;font-size: 11px;color: red;" v-if="redLine">密码错误</text> -->
			          <button style="margin-top: 10px;
			  										border-radius: 14px;
			  										width: 80%;
			  										height: 35px;
			  										font-size: 14px;
			  										color:#fff;
			  										background-color:#0273FD;" @click="submitPay">去支付 ￥{{view_rules.view_price}}</button>
			  	</view>
			    </u-popup>
	</view>
</template>

<script>
	import {
		api_getSetting,
		api_getCategory,
		api_getPhotoList,
		api_cartList,
		api_payCart,
		api_deleteCart,
		api_getJumpDownLoadUrl,
		api_batchPhotoBuy,
		api_getmyPhoto,
		api_getmyReward,
		api_faceSearchWithUpload,
		api_getAuthUrl,
		api_payAccess
	} from '@/api/photo';
	import Preview from '@/components/preview.vue';
		import md5 from 'js-md5'

	import wContainer from '@/uni_modules/simple-waterfall/components/simple-waterfall/w-container.vue'
	import wItem from '@/uni_modules/simple-waterfall/components/simple-waterfall/w-item.vue'
	import {
		pathToBase64,
		base64ToPath
	} from 'image-tools';
	export default {

		props: {
			live_id: String,
		},
		components: {
			Preview,
			wContainer,
			wItem
		},
		computed: {
			// 使用计算属性来创建动态样式对象
			dynamicStyle() {
				return {
					'min-height': this.curHeight + 'rpx',
				};
			}
		},
		data() {
			return {
				redLine:false,
				passwordLink:'',
				showPopup:false,
				showPopupLine:false,
				isSticky: false,
				columnNumber: 2,
				columnSpacing: 5,
				page: 1,
				size: 20,
				// 基础直播间信息
				infrom: {},
				options: {},
				isDetails: false, //活动详情
				show: false,
				current: 0,
				tabsList: [{
						name: '图片直播',
						value: 1
					},
					{
						name: '已购图片',
						value: 2
					}
				],
				sort: true,
				// 分类列表
				categoryList: [{
					name: "全部",
					id: 1
				}, ],
				curId: 0,
				imgList: [{
						name: '宫格',
						id: 'zxc223xxx',
						icon: 'icon-sanlie',

					},
					{
						name: '瀑布流',
						id: 'zxc223ccx',
						icon: 'icon-gongge'
					}, {
						name: '拼接',
						id: 'szxcdwccx',
						icon: 'icon-yihang'
					},
					{
						name: '时间轴',
						id: 'fjkdjk32l',
						icon: 'icon-shijianzhou'
					}
				],
				imgIndex: 0, //0 宫格 1瀑布流 2拼接 3时间轴
				imgList2: [{
						name: '正序',
						id: 'zxklethjxsfe',
						icon: 'icon-zhengxu'
					},
					{
						name: '倒序',
						id: 'dx343klgrjklxl',
						icon: 'icon-daoxu',
					}
				],
				imgSortIndex: 1,
				photoList: [],
				timestampList: [], //时间排序列表
				// 悬浮球
				isShow: false,
				curHeight: 98,
				// 购物车
				cartList: [],
				view_rules:{},
				cartInfrom: {
					isCart: false,
					total_price: null,
					isCartEdit: true,
					checked: false
				},
				selectedImages: [], //购物车选中
				// 下载
				seleList: [],
				seleLists: [],
				down: {
					isDown: false
				},
				isPreview: false,
				index: 0,
				// 我的
				isInform: false,
				isPhto: false,
				myPhotoList: [],
				myPhotoListDow: [],
				rewardList: [],
				recognition: false, //人脸
				// 人脸
				recogObj: {
					baseImg: 'https://j1.weizan.cn/live-statics/livepage/live-static/img/face-default.39e83f04.png',
					tips: '温馨提示：建议上传单人正面照片，非正面角度或人物偏小会影响匹配精准度。照片大小建议不超过10M。',
					isDetected: '',
				},

			}
		},
		onLoad(options) {
			this.options = options || {};
			this.options.live_id = this.live_id || this.options.live_id;
			if (options.userid && options.wxopenid) {
				uni.setStorageSync('userid', options.userid);
				uni.setStorageSync('wxopenid', options.wxopenid);
				// 获取URL参数
				let params = this.$route.query;
				// 删除特定参数，比如名为 'paramToDelete' 的参数
				delete params.userid;
				delete params.wxopenid;
				// 构建新的URL
				let newUrl = window.location.pathname + '?' + new URLSearchParams(params).toString();
				// 使用history.replaceState()方法替换当前URL
				history.replaceState(null, '', newUrl);
			}
			let userid = uni.getStorageSync('userid');
			let wxopenid = uni.getStorageSync('wxopenid')

			if (options.live_id) {
				if (!userid || !wxopenid) {
					console.log(userid)
					console.log(wxopenid)
					this.getAuthUrl();
				};

				if (userid && wxopenid) {
					this.getSetting();
					this.getCategory();
					this.getPhotoList();
					this.getmyReward()
				}
			};

			if (!options.live_id) {
				window.close();
			}

			// 加载基础信息

		},

		created() {
			let options = this.$route.query || {};
			this.options = this.$route.query || {};
			this.options.live_id = this.live_id || this.options.live_id;
			if (options.userid && options.wxopenid) {
				uni.setStorageSync('userid', options.userid);
				uni.setStorageSync('wxopenid', options.wxopenid);
				// 获取URL参数
				let params = this.$route.query;
				// 删除特定参数，比如名为 'paramToDelete' 的参数
				delete params.userid;
				delete params.wxopenid;
				// 构建新的URL
				let newUrl = window.location.pathname + '?' + new URLSearchParams(params).toString();
				// 使用history.replaceState()方法替换当前URL
				history.replaceState(null, '', newUrl);
			}
			let userid = uni.getStorageSync('userid');
			let wxopenid = uni.getStorageSync('wxopenid')

			if (options.live_id) {
				if (!userid || !wxopenid) {
					console.log(userid)
					console.log(wxopenid)
					this.getAuthUrl();
				};

				if (userid && wxopenid) {
					this.getSetting();
					this.getCategory();
					this.getPhotoList();
					this.getmyReward()
				}
			};

			if (!options.live_id) {
				window.close();
			}
		},
		mounted() {
			window.addEventListener('scroll', this.handleScroll)
		},
		methods: {
			submitPay(){
				let {
					live_id
				} = this.options;
				api_payAccess({live_id: live_id }).then(res => {
					if (res.code == 1) {
						setTimeout(() => {
							let a = document.createElement('a');
							a.href = res.data.pay_url // 设置跳转链接
							a.target = '_self'; // 在新标签页中打开链接
							a.click();
							// 点击后移除a标签
							document.body.removeChild(a);
						}, 500)
					}
					})
			},
			submitPassword(){
				let newPassword = md5(this.passwordLink)
				if(newPassword == this.view_rules.view_password){
					this.showPopup = false
					this.redLine = false
					uni.setStorageSync('newPassword',newPassword);
				}else{
					this.redLine = true
					this.passwordLink = ''
				}
			},
			async getAuthUrl() {
				let {
					live_id
				} = this.options;
				let res = await api_getAuthUrl({
					live_type: 'photo',
					live_id: live_id
				});
				let a = document.createElement('a');
				a.href = res.data; // 设置跳转链接
				a.target = '_self'; // 在新标签页中打开链接
				location.href = a.href;
				// 将a标签添加到页面中
				document.body.appendChild(a);
				// 模拟点击a标签
				a.click();
				// 点击后移除a标签
				document.body.removeChild(a);
			},
			// 加载基础直播间信息
			async getSetting() {
				let {
					live_id
				} = this.options;
				let res = await api_getSetting({
					live_id: live_id
				});

				this.infrom = res.data || {};
				this.view_rules = res.data.view_rules
				if(this.view_rules.view_type == 2){
					if(uni.getStorageSync('newPassword') && (this.view_rules.view_password == uni.getStorageSync('newPassword'))){
						this.showPopup = false
					}else{
						this.showPopup = true
					}
				}else if(this.view_rules.view_type == 3){
					if(this.view_rules.pay_status == 1){
						this.showPopupLine = false
					}else{
						this.showPopupLine = true
					}
				}
				// 设置标题
				uni.setNavigationBarTitle({
					title: res.data.title || '',
				});
				console.log(res)
			},
			// 加载tab 分类
			async getCategory() {
				let {
					live_id
				} = this.options;
				let res = await api_getCategory({
					live_id: live_id
				});

				this.categoryList = res.data;
				this.categoryList.unshift({
					id: 0,
					name: '全部'
				})


			},
			async getPhotoList() {
				// 加载图片列表
				let res = await api_getPhotoList(this.options);

				this.photoList = res.data.list || [];
				this.timestampList = this.clisjd(res.data.list, 'desc')

			},
			async getCart() {
				let {
					live_id
				} = this.options;
				// 购物车
				let app = this;
				app.cartInfrom.isCart = true;
				app.cartInfrom.isCartEdit = true;
				let res = await api_cartList({
					live_id: live_id,
					type: 'photo_live'
				});
				if (res.code == 1) {
					app.cartList = res.data.list;
					app.cartInfrom.total_price = res.data.total_price;
				}
			},
			async getmyPhotoList() {
				// 已购
				let {
					live_id
				} = this.options;
				// 已购
				let res = await api_getmyPhoto({
					live_id: live_id,
					page: 1
				});
				if (res.code == 1) {

					this.photoList = res.data || [];
					this.timestampList = this.clisjd(res.data, 'desc')
				}
			},
			// 打赏列表
			getmyReward() {
				let {
					live_id
				} = this.options;

				// 打赏列表
				api_getmyReward({
					live_id: live_id,
					page: 1
				}).then(res => {
					this.rewardList = res.data || [];
				})
			},

			details() {
				// 活动详情
				// uni.showToast({ icon: 'none',title: '1111' });
				// this.$toast('删除成功')
				this.isDetails = true;

			},
			tabSumbit(item, index) {
				console.log(item)
				this.curId = 0;
				this.options.category_id = null;
				this.tabIndex = item.index;
				if (item.value == 1) {
					this.getCategory();
					this.getPhotoList();

				} else {
					
					this.categoryList = [];
					this.categoryList.unshift({
						id: 0,
						name: '全部'
					})
					this.getmyPhotoList();

				}
				// console.log(item,index,1111)
			},
			tabSwitch(id) {
				this.curId = id;
				this.options.category_id = id;
				console.log(this.current)
				if(!this.tabIndex){
					this.getPhotoList();
				}else{
					
					this.getmyPhotoList();
				}
				
				
			},
			onSort() {
				let app = this;
				let photoList = app.photoList;
				this.sort = !this.sort;
				// this.show = false;
				this.timestampList = [];
				if (this.sort) {
					this.imgSortIndex = 1;
				} else {
					this.imgSortIndex = 0;
				}
				// 处理排序
				if (app.sort) {
					this.photoList = this.customSort(photoList, 'desc')
					this.timestampList = this.clisjd(photoList, 'desc')

				} else {
					this.photoList = this.customSort(photoList, 'asc')
					this.timestampList = this.clisjd(photoList, 'asc')
				}
				console.log(this.photoList, "正常排序")
				console.log(this.timestampList, "时间排序")
			},
			clisjd(lists, order) {
				if (lists.length === 0) {
					return lists
				}
				// 原始数组
				let data = lists;
				if (order === 'asc') {
					data.sort((a, b) => a.upload_time - b.upload_time);
				} else if (order === 'desc') {
					data.sort((a, b) => b.upload_time - a.upload_time);
				}
				// 转换为指定格式
				let result = {};
				data.forEach(obj => {
					let date = new Date(obj.upload_time * 1000);
					let year = date.getFullYear();
					let month = date.getMonth() + 1;
					let day = date.getDate();
					let hour = date.getHours();
					let minute = date.getMinutes();

					let time = `${year}-${month}-${day}`;
					let startTime = `${hour}:00`;
					let endTime = `${hour}:59`;
					let timeRange = `${startTime} - ${endTime}`;
					if (!result[time]) {
						result[time] = {
							time,
							sjd: {}
						};
					}
					if (!result[time].sjd[timeRange]) {
						result[time].sjd[timeRange] = [];
					}
					result[time].sjd[timeRange].push(obj);
				});

				let finalResult = Object.values(result);
				// console.log(finalResult);
				return finalResult
			},
			format(item, index) {
				this.imgSortIndex = index;
				this.onSort();
				// this.imgIndex2 = index;
				// if (stat === 1) {
				// 	this.imgIndex2 = index;
				// 	// this.sort = !this.sort;
				// 	this.onSort();

				// } else {
				// 	this.imgIndex = index;
				// }
			},
			getListType(index) {
				this.imgIndex = index;
				// this.onSort();
			},
			preview(item, index) {
				if (this.down.isDown) {
					console.log(item, "item")
					if (this.seleList.indexOf(item.id) > -1) {
						this.seleList = this.seleList.filter(item1 => item1 != item.id);
						this.seleLists = this.seleLists.filter(item1 => item1 != item.id);
					} else {
						this.seleList.push(item.id);
						if (item.is_buy) {
							this.seleLists.push(item.id)
						}
					}
				} else {
					let curIndex = this.photoList.findIndex(i => {
						// console.log(i.id == item.id)
						return i.id == item.id
					})
					console.log(curIndex)
					this.index = curIndex;
					this.isPreview = true;
				}
			},
			closeBar() {
				// 悬浮球
				const app = this
				app.isShow = !app.isShow
				if (app.isShow) {
					app.curHeight = 490;
				} else {
					app.curHeight = 98;
				};
			},
			onToggleShow() {
				const app = this
				app.show = !app.show;
			},
			onPageScroll(event) {
				// console.log(event)
				// 在这里处理滚动事件，event.detail.scrollTop为滚动距离
				const app = this;
				app.show = false
			},
			// 购物车
			toggleSelectImage(id) {
				if (this.cartInfrom.isCartEdit) return;
				if (this.selectedImages.indexOf(id) > -1) {
					this.selectedImages = Array.from(new Set(this.selectedImages.filter(item => item != id)));
				} else {
					this.selectedImages.push(id);
				}

				if (this.cartList.length == this.selectedImages.length) {
					this.cartInfrom.checked = true;
				} else {
					this.cartInfrom.checked = false;
				}
			},
			// 购物车全选
			handleClick() {
				if (this.cartList.length <= this.selectedImages.length) {
					this.selectedImages = []
					this.cartInfrom.checked = false;
				} else {
					this.cartList.map((item, index) => {
						console.log(index)
						this.selectedImages.push(item.id)
					})
					this.cartInfrom.checked = true;
				}
			},
			// 购物车返回
			backRet() {
				this.selectedImages = [];
				this.cartInfrom.isCartEdit = true;
			},
			// 购物车删除
			deleteCart() {
				let {
					live_id
				} = this.options;
				let ids = this.selectedImages.join(',');
				if (this.selectedImages.length == 0) {
					return uni.showToast({
						title: '请选择要删除的数据',
						icon: 'none',
					})


				}
				api_deleteCart({
					live_id: live_id,
					ids: ids
				}).then(res => {
					if (res.code == 1) {
						this.cartList = this.cartList.filter(item => !this.selectedImages.includes(item.id));
						this.photoList.map(item => {
							item.is_cart = this.selectedImages.includes(item.id)
						})
						uni.showToast({
							icon: 'none',
							title: '删除成功'
						});
						// this.$toast('删除成功')
					} else {
						uni.showToast({
							title: '删除失败',
							icon: 'none',
						})
					}
				})
			},
			paymentJump(url) {

				let a = document.createElement('a');
				a.href = url // 设置跳转链接
				a.target = '_self'; // 在新标签页中打开链接
				a.click();
				// 点击后移除a标签
				document.body.removeChild(a);

			},
			// 付费下载
			paidDownload() {
				let app = this;
				let {
					live_id
				} = app.options;
				let ids = this.cartList.map(data => data.data_id).join(',');
				api_payCart({
					live_id: live_id
				}).then(result => {
					console.log(result, "result")
					if (result.code == 1) {
						this.paymentJump(result.data.pay_url);
					} else {
						uni.showToast({
							title: result.msg,
							icon: 'none',
						})
					}
				})



				// api_payCart({
				// 	live_id: live_id
				// }).then(result => {
				// 	WeixinJSBridge.invoke(
				// 		'getBrandWCPayRequest', {
				// 			"appId": result.data.app_id, //公众号ID，由商户传入     
				// 			// prepay_id:result.data.prepay_id,
				// 			"timeStamp": result.data.timeStamp, //时间戳，自1970年以来的秒数     
				// 			"nonceStr": result.data.nonceStr, //随机串     
				// 			"package": `prepay_id=${result.data.prepay_id}`,
				// 			"signType": "MD5", //微信签名方式：     
				// 			"paySign": result.data.paySign //微信签名 
				// 		}, res => {
				// 			if (res.err_msg == "get_brand_wcpay_request:ok") {
				// 				// res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
				// 				uni.showToast({
				// 					title: '支付成功',
				// 					icon: 'none',
				// 				})
				// 				// 支付成功后 手动调用删除购物车
				// 				api_deleteCart({
				// 					live_id: live_id,
				// 					ids: 'all'
				// 				});
				// 				if (this.cartList.length) {
				// 					// 支付成功后 改状态; 
				// 					const photoMap = {};
				// 					this.photoList.forEach(item => {
				// 						photoMap[item.id] = item;
				// 					});

				// 					// 遍历 cartList，查找匹配项并设置 is_buy 为 true
				// 					this.cartList.forEach(item => {
				// 						if (photoMap[item.data_id]) {
				// 							photoMap[item.data_id].is_buy = true;
				// 						}
				// 					});
				// 				};

				// 				api_getJumpDownLoadUrl({
				// 					live_id: live_id,
				// 					ids: ids,
				// 					action: 'pay',
				// 				}).then(resu => {
				// 					this.photoList.map(item => {
				// 						if (app.seleList.indexOf(item.id) > -1) {
				// 							item.is_buy = true;
				// 						}
				// 					});
				// 					setTimeout(() => {
				// 						let a = document.createElement('a');
				// 						a.href = res.data.result.openlink +
				// 							'&action=pay'; // 设置跳转链接
				// 						a.target = '_self'; // 在新标签页中打开链接
				// 						a.click();
				// 						// 点击后移除a标签
				// 						document.body.removeChild(a);
				// 						app.seleList = [];

				// 					}, 500)

				// 				})



				// 			}
				// 		})
				// });
			},
			//  我的 下载
			downImg() {
				this.down.isDown = true;
			},
			closeImg() {
				this.down.isDown = false;
				this.seleList = [];
				this.seleLists = [];
			},

			// 免费下载
			freeDownload() {
				let {
					live_id
				} = this.options;
				if (this.seleList.length < 1) return
				let ids = this.seleList.join(',')
				api_getJumpDownLoadUrl({
					live_id: live_id,
					ids: ids,
					action: 'free'
				}).then(res => {
					let a = document.createElement('a');
					a.href = res.data.result.openlink; // 设置跳转链接
					a.target = '_self'; // 在新标签页中打开链接
					a.click();
					// 点击后移除a标签
					document.body.removeChild(a);
				})
			},
			// 我的 下载付费批量
			paidDownloads() {
				let {
					live_id
				} = this.options;
				if (this.seleList.length < 1) return
				let getSeleList = [];
				this.photoList.forEach((item) => {
					if (this.seleList.indexOf(item.id) > -1 && !item.is_buy) {
						getSeleList.push(item.id)
					}
				});
				let ids = getSeleList.join(',')
				if (!ids) return;
				console.log(ids)
				let app = this;
				if (this.seleList.length == this.seleLists.length) {
					api_getJumpDownLoadUrl({
						live_id: this.live_id,
						ids: ids,
						action: 'pay'
					}).then(res => {
						let a = document.createElement('a');
						a.href = res.data.result.openlink; // 设置跳转链接
						a.target = '_self'; // 在新标签页中打开链接
						// a.click();
						// 点击后移除a标签
						document.body.removeChild(a);
					})
					return
				}

				api_batchPhotoBuy({
					live_id: live_id,
					ids: ids
				}).then(result => {
					console.log(result, "result")
					if (result.code == 1) {
						this.paymentJump(result.data.pay_url);
					} else {
						uni.showToast({
							title: result.msg,
							icon: 'none',
						})
					}


				})




			},

			findNow() {
				let app = this;
				let {
					live_id
				} = this.options;

				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0];
						pathToBase64(tempFilePath).then(base64 => {
							console.log(base64)
							api_faceSearchWithUpload({
								live_id: live_id,
								content: base64
							}).then(result => {
								this.recogObj.baseImg = base64;

								if (result.data.list.length) {
									// storage.set('BASE_SE',base64, );

									uni.setStorageSync('imageURL', base64);
									uni.navigateTo({
										url: '/pages/facialDetails/index' +
											`?base=${base64}&live_id=${live_id}` // 要跳转的页面路径
									});
								}
								if (!result.data.list.length) {
									// 未识别到数据
									this.recogObj.tips = '未识别到人脸';
									this.recogObj.isDetected = '重新上传';
								}

							}).catch(() => {
								uni.navigateTo({
									url: '/pages/facialDetails/index' +
										`?base=${base64}&live_id=${live_id}` // 要跳转的页面路径
								});

								this.recogObj.tips = '服务器错误';
								this.recogObj.isDetected = '重新上传';
								// console.log();
							})
						}).catch(error => {

							console.error(error)

						})
						// console.log(res)
					},
					fail: (err) => {
						console.log('选择图片失败', err);
					}
				});
			},

			// 拉起支付 通用方法
			makePayment(result, cakll) {
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						"appId": result.data.app_id, //公众号ID，由商户传入     
						// prepay_id:result.data.prepay_id,
						"timeStamp": result.data.timeStamp, //时间戳，自1970年以来的秒数     
						"nonceStr": result.data.nonceStr, //随机串     
						"package": `prepay_id=${result.data.prepay_id}`,
						"signType": "MD5", //微信签名方式：     
						"paySign": result.data.paySign //微信签名 
					},
					res => {
						if (res.err_msg == "get_brand_wcpay_request:ok") {
							cakll && cakll();
						}

					})
			},

			updateValue(index, newValue) {
				console.log(index, newValue)
				this.photoList[index].is_buy = newValue;
			},
			// 我的
			personalCenter() {
				this.getmyReward();
				this.isInform = true
			},
			// 我的 下载
			togglemyPhotoListDow(item) {
				if (!this.isPhto) return
				let id = item.id;
				if (this.myPhotoListDow.indexOf(id) > -1) {
					this.myPhotoListDow = Array.from(new Set(this.myPhotoListDow.filter(item => item != id)));
				} else {
					this.myPhotoListDow.push(id);
				}
				if (this.myPhotoList.length == this.myPhotoListDow.length) {
					this.checked = true;
				} else {
					this.checked = false;
				}
			},
			backPhotoRet() {
				this.isPhto = false;
				this.checked = false;
				this.myPhotoListDow = [];
			},
			// 免费下载
			downLoads() {
				let {
					live_id
				} = this.options;
				if (this.myPhotoListDow.length < 1) return
				let ids = this.myPhotoListDow.join(',');

				api_getJumpDownLoadUrl({
					live_id: live_id,
					ids: ids,
					action: 'pay'
				}).then(res => {
					console.log(res.data.result.openlink, "222")
					let a = document.createElement('a');
					a.href = res.data.result.openlink; // 设置跳转链接
					a.target = '_self'; // 在新标签页中打开链接
					a.click();
					// 点击后移除a标签
					document.body.removeChild(a);
				})

			},
			// 时间处理
			dateFormat(timestamp) {
				var date = new Date(timestamp * 1000); // 将秒数转换为毫秒数
				var year = date.getFullYear();
				var month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份从0开始，需要加1
				var day = ('0' + date.getDate()).slice(-2);
				var hours = ('0' + date.getHours()).slice(-2);
				var minutes = ('0' + date.getMinutes()).slice(-2);
				var seconds = ('0' + date.getSeconds()).slice(-2);

				// var formattedDate = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
				var formattedDate = year + '-' + month + '-' + day
				return formattedDate;
			},
			customSort(arr, order) {
				if (arr.length === 0) {
					return arr
				}
				// 冒泡
				if (order === 'asc') {
					return arr.sort((a, b) => a.sort - b.sort);
				} else if (order === 'desc') {
					return arr.sort((a, b) => b.sort - a.sort);
				}
			},
			facialSearch() {

				this.recogObj = {
					baseImg: 'https://j1.weizan.cn/live-statics/livepage/live-static/img/face-default.39e83f04.png',
					tips: '温馨提示：建议上传单人正面照片，非正面角度或人物偏小会影响匹配精准度。照片大小建议不超过10M。',
					isDetected: '',
				}
				this.recognition = true;
			},
			convertTimestamp(timestamp) {
				var date = new Date(timestamp * 1000);
				var year = date.getFullYear();
				var month = ("0" + (date.getMonth() + 1)).slice(-2);
				var day = ("0" + date.getDate()).slice(-2);
				var hours = ("0" + date.getHours()).slice(-2);
				var minutes = ("0" + date.getMinutes()).slice(-2);
				var seconds = ("0" + date.getSeconds()).slice(-2);
				var formattedTime = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
				return formattedTime;
			},
			handleScroll() {
				// 获取吸顶容器的位置信息
				uni.createSelectorQuery().select('.sticky').boundingClientRect(data => {
					// 判断元素是否已经吸顶
					if (data.top <= 0) {
						this.isSticky = true;
						this.show = false
						// console.log('元素已经吸顶');
						// 执行相应操作
					} else {
						this.isSticky = false;
						this.show = false
					}
				}).exec();

			}
		}


	}
</script>

<style lang="scss" scoped>
	
	.header_cover {
		.banner {
			object-fit: cover;
			width: 100%;
			display: block;
			// height: 240rpx;
		}

	}

	.sort_btn {
		font-size: 31rpx;
	}

	uni-toast {
		z-index: 9999 !important;
		/* 根据实际情况进行调整 */
	}

	.photo_content {
		width: 100%;
		box-sizing: border-box;
		min-height: 100vh;
		// overflow-x:hidden !important;
		// overflow: hidden;

		background: #fff;

		.photo_title {
			padding: 20rpx 26rpx;
			background: #fff;
			position: relative;
			z-index: 3;

			.ellipsis2 {
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				word-break: break-all;
				font-size: 38rpx;
				color: #202124;
				font-weight: 700;
			}

			.time {
				margin: 24rpx 0;
				color: #919499;

				i {

					margin-right: 8px;
				}

				text {
					font-size: 26rpx;
				}
			}

			.location {

				color: #919499;
				// margin-bottom: 24rpx;
				display: flex;
				line-height: 1.3;
				word-break: break-all;

				text {
					font-size: 26rpx;
				}

				i {

					margin-right: 8px;
				}

			}
		}


		.title {
			padding: 20rpx 26rpx;
			// border-radius: 0.16rem 0.16rem 0 0;
			background: #fff;
			position: relative;
			z-index: 3;
		}

		.ellipsis2 {
			display: -webkit-box;
			word-break: break-all;
			font-size: 38rpx;
			color: #202124;
			font-weight: 700;
		}

		.status_row {
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			font-size: 30rpx;
			color: #919499;

			.status {
				margin-right: 30rpx;
			}



			.detail {
				margin-left: auto;
				display: flex;
				align-items: center;
				cursor: pointer;

			}
		}

		.tab_area {
			background: #fff;
			position: sticky;
			top: 0;
			z-index: 100;
			width: 100%;

			// overflow-x: hidden;
			.pic_tab {
				display: flex;
				align-items: center;
				padding: 0 26rpx;
				border-bottom: 1px solid #f5f6f7;
				position: relative;
				z-index: 20;

				.sort {
					margin-left: auto;
					display: flex;
					align-items: center;

					view {
						margin-left: 31rpx;
					}

				}
			}
		}

		.tab_area.show {
			top: 0;
			z-index: 400;
		}

		.drop_menu {
			padding: 0;
			list-style: none;
			position: absolute;

			width: 100%;
			background: #fff;
			z-index: 227;
			box-sizing: border-box;
			border-radius: 0 0 54rpx 54rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			transition: height .2s;
			height: 0;
			overflow: hidden;

			.sort_row {
				display: flex;
				padding: 0;
				justify-content: space-between;
				margin: 20rpx 30rpx 0;


				i {
					margin-right: 29rpx;
				}

				p {
					font-size: 26rpx;
				}

				li {
					width: 320rpx;
					height: 100rpx;
					border-radius: 70rpx;
					border: 1px solid #f5f6f7;
					color: #60646b;
					display: flex;
					align-items: center;
					justify-content: center;
					cursor: pointer;
					box-sizing: border-box;
					text-decoration: none;
					align-items: center;
				}

				.on_sort_row {
					color: #006cff;
					background: rgba(0, 108, 255, .05);
					border: none;


				}

			}


			.list_style {
				list-style: none;
				display: flex;
				justify-content: space-between;
				padding: 0;
				margin: 0 30rpx 50rpx;

				// margin: 0 50rpx 30rpx;
				.on {
					color: #202124;

					i {
						background: rgba(0, 108, 255, .05);
						border: none;
						color: #006cff;
					}
				}

				li {
					display: flex;
					flex-direction: column;
					align-items: center;
					cursor: pointer;

					i {
						width: 110rpx;
						height: 110rpx;
						border-radius: 100rpx;
						border: 1px solid #f5f6f7;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-bottom: 16rpx;
						color: #60646b;
						font-size: 34rpx;
						box-sizing: border-box;
					}

					p {
						font-size: 26rpx;
					}
				}

			}
		}

		.drop_menu.show {
			height: 400rpx;
			z-index: 555;
			// background: red;
		}

		.pic_type {
			display: flex;
			box-sizing: border-box;
			align-items: center;
			height: 80rpx;
			width: 100%;
			// overflow-x: auto;
			// flex-shrink: 0;
			padding: 0 12px;

			// padding: 0 12px;
			.type_item {
				font-size: 28rpx;
				margin-left: 33rpx;
			}

			.type_item.on {
				color: #006cff;
			}
		}

		.list_wrapper {
			position: relative;

			.list_images {
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(200rpx, 2fr));
				grid-gap: 6rpx;
				padding: 0 5rpx;

				>.flex-s {
					height: 240rpx;


					img {
						width: 100%;
						height: 100%;
						object-fit: cover;

					}
				}

				>.u-list-item {
					height: 240rpx;

					// margin-right: 6rpx;
					// margin-bottom: 6rpx;
					img {
						width: 100%;
						height: 100%;
						object-fit: cover;

					}
				}

			}
		}

		.list_montage {
			position: relative;

			.list_images {
				// display: grid;
				// grid-template-columns: repeat(auto-fill, minmax(200rpx, 2fr));
				// grid-gap: 6rpx;
				padding: 0 5rpx;

				>.flex-s {
					width: 100%;
					aspect-ratio: 100 / 47;
					margin-bottom: 6rpx;

					img {
						width: 100%;
						height: 100%;
						object-fit: cover;

					}
				}

				>.u-list-item {
					width: 100%;
					aspect-ratio: 100 / 47;
					margin-bottom: 6rpx;

					// margin-right: 6rpx;
					// margin-bottom: 6rpx;
					img {
						width: 100%;
						height: 100%;
						object-fit: cover;

					}
				}

				.u-list-item:nth-child(3n) {
					// margin-right: 0rpx;
				}
			}
		}

		.load_all {
			color: #747474;
			text-align: center;
			font-size: 28rpx;
			padding: 20rpx 0 10rpx;
			// font-style: oblique;
			padding-bottom: 50rpx;
		}

		.introduce {
			.title {
				background: none;
				padding: 20rpx 32rpx;
			}

			.introducez {
				max-height: 400rpx;
				overflow-y: auto;
			}

			// 活动详情
			.complain {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 120rpx;
				border-top: 6rpx solid #f5f6f7;
				width: 100%;

				a {
					color: #3b97ff;
					cursor: pointer;
					text-decoration: none;
				}
			}

		}

		// 悬浮球
		#right_bar {
			position: fixed;
			right: 30rpx;
			bottom: 30rpx;
			z-index: 150;
			width: 100rpx;
			line-height: 1;
			border-radius: 60rpx;
			color: #006cff;
			opacity: 1;
			text-align: center;
			transition: opacity .2s;
		}

		.fold_list {
			width: 100rpx;
			padding: 4rpx 0;
			border-radius: 80rpx;
			font-size: 32rpx;
			background: linear-gradient(180deg, #ecf4ff, #e6f6ff);
			overflow: hidden;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: center;
			transition: all .3s;
			box-sizing: border-box;
			// transition: transform 0.3s ease;

		}

		.icon_item {
			text-align: center;
			margin-bottom: 24rpx;
			margin-top: 24rpx;
			font-size: 28rpx;
			cursor: pointer;
			flex-shrink: 0;

			/deep/ {
				.u-icon__icon {
					margin: auto;
				}
			}
		}

		.tool_wrap {
			transition: height 0.5s;
			/* 使用过渡效果实现高度变化的动画 */
			overflow: hidden;
			/* 初始时隐藏溢出内容 */
		}

		.tool_wrap.open {
			height: 260px;
			/* 展开时的高度 */
		}

		.fix_btn {
			// margin-bottom: 22rpx;
			padding: 27rpx 0;
		}

		.fold_list .fix_btn {
			transition: transform 0.3s ease;
		}

		.open .fix_btn {
			transition: transform 0.3s ease;
			/* 添加过渡动画 */
			transform: rotate(180deg);
		}

		.shadow {
			position: absolute;
			width: 100%;
			min-height: 100%;
			background: rgba(0, 0, 0, .3);
			z-index: 99;
			left: 0;
			top: 0;
		}

		// 时间戳
		// @blue: #1890ff;
		// @green: #52c41a;
		// @red: #f5222d;
		// @gray: rgba(0,0,0,.25);
		.time_sorting {
			position: relative;
			// padding: 0px 14px;

		}

		.m-timeline {
			padding: 0 20rpx;

			>.desc-time {
				display: inline-block;
				// margin-left: 25px;
				font-size: 32rpx;
				font-weight: 700;
				margin: 20rpx 0;
			}

			.m-timeline-item {
				position: relative;
				padding-bottom: 30px;

				.u-tail {
					position: absolute;
					top: 10px;
					left: 5px;
					height: calc(100% - 10px);
					border-left: 2px solid #e8e8e8; // 实线
					// border-left: 2px dotted #e8e8e8; // 点线
					// border-left: 2px dashed #e8e8e8; // 虚线
				}

				.u-dot {
					position: absolute;
					width: 8px;
					height: 8px;
					border: 2px solid #1890ff;
					border-radius: 50%;
				}

				.u-content {
					position: relative;
					top: -6px;
					margin-left: 25px;
					word-break: break-all;
					word-wrap: break-word;
					line-height: 24px;
					font-size: 30rpx;

					.list_images {
						display: flex;
						flex-wrap: wrap;
						// padding: 0rpx 20rpx;
						justify-content: space-between;

						// margin-right: 10rpx;
						// justify-content: space-between;
						>.flex-s {
							width: calc(100% / 2 - 5rpx);
							height: 200rpx;
							margin: 10rpx 0rpx;

							img {
								width: 100%;
								height: 100%;
								object-fit: cover;

							}
						}

						>.u-list-item {

							width: calc(100% / 2 - 5rpx);

							// width: 300rpx;
							height: 200rpx;
							margin: 10rpx 0rpx;
							// margin-right: 16rpx;

							img {
								width: 100%;
								height: 100%;
								object-fit: cover;

							}
						}
					}
				}
			}

			.last {
				.u-tail {
					display: none;
				}
			}
		}

		// 

		// 购物车
		.cart_box {
			padding: 10rpx 30rpx;
			// min-height: 500rpx;

			.header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 26rpx;

				h1 {
					font-size: 32rpx;
					font-weight: 600;
					color: #202124;
				}

				p {
					font-size: 26rpx;
					color: #006cff;
				}
			}

			.empty_tip {
				height: 380rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				font-size: 20rpx;
				color: #919499;


			}

			.empty_tip::before {
				content: " ";
				width: 140rpx;
				height: 140rpx;
				background: url(../../static/pic-live-empty.png);
				background-size: 100% 100%;
				margin-bottom: 0.1rem;
			}

			.footer {
				padding: 40rpx;
				border-top: 1px solid #f5f6f7;
				font-size: 20rpx;
				background-color: #fff;
				display: flex;
				align-items: center;
				line-height: 1.6;
				font-size: 26rpx;

				.control {
					width: 240rpx;
					font-size: 16px;
					margin-right: 10rpx;
					color: #006cff;
					background-color: rgba(0, 108, 255, .1);
					border-radius: 50rpx;
				}

				.control.del {
					color: #f44;
					background-color: rgba(255, 68, 68, .1);
				}

				.detail {
					font-size: 20rpx;

				}

				.price {
					flex: 1;
					color: #000;
				}

				var {
					color: #f44;
				}

				.pay {
					font-size: 16px;
					padding: 2px 30px;
					// height: 90rpx;
					border-radius: 62rpx;
					color: #fff;
					background: linear-gradient(270deg, #006cff, #00a5ff);
				}
			}
		}

		.check_btn {
			position: relative;
		}

		.xz.check_btn::after {
			position: absolute;
			top: 10rpx;
			left: 0;
			content: " ";
			width: 50rpx;
			height: 50rpx;
			border-radius: 0 10rpx;
			background: url(../../static/yixuan.png)no-repeat;
			background-position: center;
			background-size: 100% 100%;

		}

		.check_btn::after {
			position: absolute;
			top: 10rpx;
			left: 0;
			content: " ";
			width: 50rpx;
			height: 50rpx;
			border-radius: 0 10rpx;
			background: url(../../static/weix.png)no-repeat;
			background-position: center;
			background-size: 100% 100%;

		}

		.list_wrappers {
			padding: 0 30rpx;
			position: relative;

			.list_img {
				// display: flex;
			}

			.image-container {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				grid-gap: 20rpx;


				img {
					// margin-right: 10rpx;
					// margin-top: 10rpx;
					width: 100%;
					height: 200rpx;
					object-fit: cover;
					// height: 100%;

				}

				.active {
					// width: 45%;
					position: relative;
				}

				.active::after {

					position: absolute;
					top: 0;
					right: 0;
					content: " ";
					width: 70rpx;
					height: 70rpx;
					border-radius: 0 10rpx;
					background: url(../../static/xiaz.png) no-repeat #000;
					background-position: center;
					background-size: 100% 100%;

				}
			}

			.image-container2 {
				display: grid;
				grid-template-columns: repeat(3, 2fr);
				grid-gap: 20rpx;
				// height: 2.05rem;

				img {
					// margin-right: 10rpx;
					// margin-top: 10rpx;
					width: 100%;
					height: 100%;

				}

				.active {
					// width: 45%;
					position: relative;
				}

				.active::after {

					position: absolute;
					top: 0;
					right: 0;
					content: " ";
					width: 70rpx;
					height: 70rpx;
					border-radius: 0 10rpx;
					background: url(../../static/xiaz.png) no-repeat #000;
					background-position: center;
					background-size: 100% 100%;

				}
			}

		}

		.check_footer {
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			justify-content: center;
			flex-direction: column;
			z-index: 999;
			width: 100%;

			.down-tips {
				line-height: 60rpx;
				height: 60rpx;
				background: #fff8ec;
				font-size: 24rpx;
				font-weight: 400;
				color: #ffa800;
				padding: 0 16rpx;
				text-overflow: clip;
				overflow: hidden;
				white-space: nowrap;
				width: 100%;
				box-sizing: border-box;
			}

			.d-flex {
				display: flex;
			}

			.row {
				width: 100%;
				height: 200rpx;
				display: flex;
				align-items: center;
				padding: 0 32rpx;
				background: #fff;
				box-sizing: border-box;

				.cancel {
					display: flex;
					flex-direction: column;
					cursor: pointer;
					font-size: 24rpx;
					flex-shrink: 0;
					align-items: center;
				}

				.btn-wrap-outer {
					flex: 1;
				}

				.free-download,
				.pay-download {
					display: flex;
					flex: 1;
					position: relative;
					margin-left: 20rpx;
				}

				.pay-download {
					font-size: 24rpx;

					.btn-down {
						background: linear-gradient(270deg, #ff8d00, #ffc000);
					}

				}

				.btn-down {
					height: 100rpx;
					border-radius: 80rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					flex: 1;
					text-align: center;
					font-size: 24rpx;
					color: #fff;
					background: linear-gradient(270deg, #006cff, #00a5ff);
				}
			}
		}

		// 人脸样式
		.face_popup {
			height: 100%;
			// height: 5.85rem;
			padding-bottom: 0.15rem;
			box-sizing: content-box;
			background: linear-gradient(#22235b, #0e0f2c);
			border-radius: 0.2rem 0.2rem 0 0;
			text-align: center;
			position: relative;
			line-height: 1.6;
			overflow: hidden;

			.line {
				position: absolute;
				top: 16rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 90rpx;
				height: 30rpx;
				background: #edeff2;
				border-radius: 20rpx;
				opacity: .2;
			}

			h1 {
				font-size: 22px;
				color: #fff;
				padding: 80rpx 0 20rpx;
				font-weight: 600;
			}

			h2 {
				font-size: 22rpx;
				color: hsla(0, 0%, 100%, .5);
				font-weight: 600;
			}

			.veriface_wrap {
				width: 640rpx;
				height: 540rpx;
				background: url(../../static/face-bg.png) no-repeat 50%;
				background-size: 100% 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 auto;
				position: relative;
			}

			.veriface_pic {
				position: relative;
				width: 400rpx;
				height: 400rpx;
				box-sizing: border-box;

				.face {
					// width: 100%;
					// height: 100%;
					width: 360rpx;
					height: 340rpx;
					border-radius: 50%;
				}

				.face_scan {
					width: 380rpx;
					height: 160rpx;
					position: absolute;
					left: 0;
					top: 120rpx;
				}
			}

			.face_pd {
				// padding: 40rpx;
				font-size: 22rpx;
				font-weight: 500;
				// line-height: 22rpx;
				color: hsla(0, 0%, 100%, .5);
			}

			.upload {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 680rpx;
				height: 100rpx;
				background: linear-gradient(135deg, #00abff, #006cff);
				border-radius: 60rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: #fff;
				margin: 16rpx auto 0;
				cursor: pointer;

				img {
					width: 50rpx;
					height: 50rpx;
				}
			}

			.agree_row {
				display: inline-flex;
				align-items: center;
				color: #fff;
				font-size: 28rpx;
				justify-content: center;
				margin-top: 18rpx;
				cursor: pointer;
			}
		}

		.tables {
			width: 100%;
			border-collapse: collapse;

			.row {
				display: flex;
			}

			.row>* {
				flex: 1;
				padding: 8px;
				border: 1px solid #ccc;
			}

			.header {
				font-weight: bold;
				// background-color: #f0f0f0;
			}


		}

		.box {
			background-color: #fff;
			box-shadow: 3rpx 5rpx 57rpx 0px rgba(155, 131, 255, 0.2);
			// border-radius: 10rpx;
			overflow: hidden;
		}

		.image {
			width: 100%;
			height: auto;
			box-sizing: border-box;
			margin: 0;
			padding: 0;
			vertical-align: bottom;
		}

		.Waterfall_flow {
			padding: 4rpx;
			position: relative;
		}
	}

	.flex-s {
		position: relative;
	}

	.purchased::after {
		position: absolute;
		top: 2rpx;
		right: 2rpx;
		content: "已购";
		padding: 4rpx;
		font-size: 28rpx;
		// width: 40rpx;
		// height: 40rpx;
		border-radius: 5rpx;
		background: #FEA701;
		color: #fff;
		// background: url(../../static/weix.png)no-repeat;
		background-position: center;
		background-size: 100% 100%;
	}

	.m-btn-wrap {
		padding: 0px 30rpx;


	}


	// 主题  黄金
	.photo_content.theme_1 {
		.photo_contentbox {
			position: relative;
			background: url('../../static/themeback_1.png')no-repeat;
			// background-position: 0px -104px;
			background-size: 100% 100%;
			// background-position: 0 -104rpx;
		}

		.pic_type {
			.type_item {
				color: #F8EECE;
			}

			.type_item.on {
				color: #fff;
			}
		}

		.load_all {
			color: #F8EECE;
			// background-color: #6F552F;
		}

		.title.popup {
			.status_row {
				color: #919499;
			}
		}

		#right_bar {
			color: #ffe6bd;
			background: linear-gradient(135deg, #BC9D5A, #A2854B);

			.fold_list {
				background: none;
			}

			.piciconfont {
				font-size: 44rpx;
			}

			/deep/ {
				.u-icon__icon {
					color: #ffe6bd !important;
				}
			}

		}

		;

		.list_wrapper,
		.Waterfall_flow,
		.list_montage,
		.time_sorting {
			// background: #060501;
			// background: linear-gradient(to right, #AF9153, #927643);
			min-height: 50vh;
		}

		.drop_menu {
			background: #9C8048;
		}

		.time {
			color: #F8EECE;
		}

		.location {
			color: #F8EECE;
		}

		.photo_title {
			background: none;

			.ellipsis2 {
				color: #F8EECE;
			}
		}

		.status_row {
			color: #F8EECE;
		}

		.pic_tab {
			border-bottom: #B69857;
			color: #F8EECE;
		}

		.drop_menu {
			.sort_row li {
				border: 1px solid #B69857;
				color: #fff;
			}

			.piciconfont {
				// border: 1px solid #B69857;
			}

			.list_style li {
				color: #ffe6bd;

				i {
					border: 1px solid #B69857;
					color: #fff;
				}
			}

			.list_style .on {
				color: #fff;
			}
		}

		.tab_area {
			background: none;
			color: #F8EECE;
		}

		.tab_area.sticky_is {
			background: #B69857;
		}

		/deep/ {
			.u-tabs__wrapper__nav__item__text {
				color: #F8EECE !important;
			}

			.u-tabs__wrapper__nav__line {
				background: #F8EECE !important;
			}
		}

	}


	// 主题2
	.photo_content.theme_2 {
		.photo_contentbox {
			position: relative;
			// background: #88AE85;
			background: linear-gradient(180deg, #84AC83, #82AB81);
		}

		.pic_type {
			.type_item {
				color: #e9e9e9;
			}

			.type_item.on {
				color: #fff;
			}
		}

		.load_all {
			color: #fff;
			// background-color: #6F552F;
		}

		.title.popup {
			.status_row {
				color: #fff;
			}
		}

		#right_bar {
			color: #fff;
			// background: linear-gradient(180deg, #82AB81, #90B48E);
			background: #99AE85;

			.fold_list {
				background: none;
			}

			.piciconfont {
				font-size: 44rpx;
			}

			/deep/ {
				.u-icon__icon {
					color: #fff !important;
				}
			}

		}

		;

		.list_wrapper,
		.Waterfall_flow,
		.list_montage,
		.time_sorting {
			// background: linear-gradient(180deg, #82AB81, #90B48E);
			min-height: 50vh;
		}

		.drop_menu {
			background: linear-gradient(180deg, #82AB81, #90B48E);
		}

		.time {
			color: #fff;
		}

		.location {
			color: #fff;
		}

		.photo_title {
			background: none;

			.ellipsis2 {
				color: #fff;
			}
		}

		.status_row {
			color: #fff;
		}

		.pic_tab {
			// border-bottom: #A4C0A0 1px solid;
			border-bottom: none;
			color: #fff;
		}

		.drop_menu {
			.sort_row li {
				border: 1px solid #A4C0A0;
				color: #fff;
			}

			.piciconfont {
				// border: 1px solid #B69857;
			}

			.list_style li {
				color: #e9e9e9e9;

				i {
					border: 1px solid #A4C0A0;
					color: #fff;
				}
			}

			.list_style .on {
				color: #fff;
			}
		}

		.tab_area {
			// background: #88AE85;
			background: none;
			color: #fff;
		}
		.tab_area.sticky_is{
			background: linear-gradient(180deg, #84AC83, #82AB81);
		}
		/deep/ {
			.u-tabs__wrapper__nav__item__text {
				color: #fff !important;
			}

			.u-tabs__wrapper__nav__line {
				background: #fff !important;
			}
		}

	}


	// 主题3
	.photo_content.theme_3 {
		.photo_contentbox {
			position: relative;
			background: url('../../static/themeback_3.png');
			background-size: 100% 100%;
			
			
		}



		.pic_type {
			.type_item {
				color: #F8EECE;
			}

			.type_item.on {
				color: #fff;
			}
		}

		.load_all {
			color: #F8EECE;
			// background-color: #6F552F;
		}

		.title.popup {
			.status_row {
				color: #919499;
			}
		}

		#right_bar {
			color: #ffe6bd;
			background: linear-gradient(135deg, #e55b05, #c72402);

			.fold_list {
				background: none;
			}

			.piciconfont {
				font-size: 44rpx;
			}

			/deep/ {
				.u-icon__icon {
					color: #ffe6bd !important;
				}
			}

		};

		

		.list_wrapper,
		.Waterfall_flow,
		.list_montage,
		.time_sorting {
			// background: #C2261F;
			
			
			
			
			min-height: 50vh;
		}

		.drop_menu {
			background: #C2261F;
		}

		.time {
			color: #F8EECE;
		}

		.location {
			color: #F8EECE;
		}

		.photo_title {
			background: none;

			.ellipsis2 {
				color: #F8EECE;
			}
		}

		.status_row {
			color: #F8EECE;
		}

		.pic_tab {
			border-bottom: #B69857;
			color: #F8EECE;
		}

		.drop_menu {
			.sort_row li {
				border: 1px solid rgba(255, 230, 189, .6);
				color: #fff;
			}

			.piciconfont {
				// border: 1px solid #B69857;
			}

			.list_style li {
				color: #ffe6bd;

				i {
					border: 1px solid rgba(255, 230, 189, .6);
					color: #fff;
				}
			}

			.list_style .on {
				color: #fff;
			}
		}

		.tab_area {
			background: none;
			color: #F8EECE;
		}
		.tab_area.sticky_is{
			background: #C2261F;
		}
		/deep/ {
			.u-tabs__wrapper__nav__item__text {
				color: #F8EECE !important;
			}

			.u-tabs__wrapper__nav__line {
				background: #F8EECE !important;
			}
		}

	}

	// 主题4
	.photo_content.theme_4 {
		.photo_contentbox {
			background: url('../../static/themeback_2.png');
			background-size:100% 100%;

		}



		.pic_type {
			.type_item {
				color: #e9e9e9;
			}

			.type_item.on {
				color: #fff;
			}
		}

		.load_all {
			color: #FFF4FA;
			// background-color: #6F552F;
		}

		.title.popup {
			.status_row {
				color: #919499;
			}
		}

		#right_bar {
			color: #fe4161;
			background: linear-gradient(180deg, #fff5f5, #ffeff2);

			.fold_list {
				background: none;
			}

			.piciconfont {
				font-size: 44rpx;
			}

			/deep/ {
				.u-icon__icon {
					color: #fe4161 !important;
				}
			}

		}

		;

		.list_wrapper,
		.Waterfall_flow,
		.list_montage,
		.time_sorting {
			// background: linear-gradient(180deg, #E47B89, #E78E9E);
			min-height: 50vh;
		}

		.drop_menu {
			background: linear-gradient(180deg, #E47B89, #E78E9E);
		}

		.time {
			color: #FFF4FA;
		}

		.location {
			color: #FFF4FA;
		}

		.photo_title {
			background: none;

			.ellipsis2 {
				color: #FFF4FA;
			}
		}

		.status_row {
			color: #FFF4FA;
		}

		.pic_tab {
			border-bottom: #B69857;
			color: #FFF4FA;
		}

		.drop_menu {
			.sort_row li {
				border: 1px solid rgba(255, 230, 189, .2);
				color: #fff;
			}

			.piciconfont {
				// border: 1px solid #B69857;
			}

			.list_style li {
				color: #e9e9e9e9;

				i {
					border: 1px solid rgba(255, 230, 189, .2);
					color: #fff;
				}
			}

			.list_style .on {
				color: #fff;
			}
		}

		.tab_area {
			background: none;
			color: #FFF4FA;
		}

		.tab_area.sticky_is{
			background: #E47B89;
		}
		/deep/ {
			.u-tabs__wrapper__nav__item__text {
				color: #FFF4FA !important;
			}

			.u-tabs__wrapper__nav__line {
				background: #FFF4FA !important;
			}
		}

	}
	
	// 主题5
	.photo_content.theme_5 {
		.photo_contentbox {
			background: url('../../static/themeback_4.png');
			background-size:100% 100%;
			// background: #0F60EF;
	
		}
	
	
	
		.pic_type {
			.type_item {
				color: #e9e9e9;
			}
	
			.type_item.on {
				color: #fff;
			}
		}
	
		.load_all {
			color: #FFF4FA;
			// background-color: #6F552F;
		}
	
		.title.popup {
			.status_row {
				color: #919499;
			}
		}
	
		#right_bar {
			color: #fff;
			background: linear-gradient(180deg, #5773ef, #8287ed);
	
			.fold_list {
				background: none;
			}
	
			.piciconfont {
				font-size: 44rpx;
			}
	
			/deep/ {
				.u-icon__icon {
					color: #fff !important;
				}
			}
	
		}
	
		;
	
		.list_wrapper,
		.Waterfall_flow,
		.list_montage,
		.time_sorting {
			// background: linear-gradient(90deg, #1063EF, #0D55ED);
			min-height: 50vh;
		}
	
	
	
		.time {
			color: #FFF4FA;
		}
	
		.location {
			color: #FFF4FA;
		}
	
		.photo_title {
			background: none;
	
			.ellipsis2 {
				color: #FFF4FA;
			}
		}
	
		.status_row {
			color: #FFF4FA;
		}
	
		.pic_tab {
			border-bottom: #B69857;
			color: #FFF4FA;
		}
	
		.drop_menu {
			background: linear-gradient(90deg, #1063EF, #0D55ED);
			// background: none;
			.sort_row li {
				border: 1px solid rgba(255, 230, 189, .2);
				color: #fff;
			}
	
			.piciconfont {
				// border: 1px solid #B69857;
			}
	
			.list_style li {
				color: #e9e9e9e9;
	
				i {
					border: 1px solid rgba(255, 230, 189, .2);
					color: #fff;
				}
			}
	
			.list_style .on {
				color: #fff;
			}
		}
	
		.tab_area {
			background: none;
	
			color: #FFF4FA;
		}
		.tab_area.sticky_is{
			background: linear-gradient(90deg, #1063EF, #0D55ED);
		}
		/deep/ {
			.u-tabs__wrapper__nav__item__text {
				color: #FFF4FA !important;
			}
	
			.u-tabs__wrapper__nav__line {
				background: #FFF4FA !important;
			}
		}
	
	}
	
	
	// 主题6
	.photo_content.theme_6 {
		.photo_contentbox {
			background: url('../../static/themeback_5.png');
			background-size:100% 100%;
			// background: #0F60EF;
	
		}
	
	
	
		.pic_type {
			.type_item {
				color: #e9e9e9;
			}
	
			.type_item.on {
				color: #fff;
			}
		}
	
		.load_all {
			color: #FFF4FA;
			// background-color: #6F552F;
		}
	
		.title.popup {
			.status_row {
				color: #919499;
			}
		}
	
		#right_bar {
			color: #fff;
			background: linear-gradient(90deg, #F4A565, #ea7a09);
	
			.fold_list {
				background: none;
			}
	
			.piciconfont {
				font-size: 44rpx;
			}
	
			/deep/ {
				.u-icon__icon {
					color: #fff !important;
				}
			}
	
		}
	
		;
	
		.list_wrapper,
		.Waterfall_flow,
		.list_montage,
		.time_sorting {
			// background: linear-gradient(90deg, #1063EF, #0D55ED);
			min-height: 50vh;
		}
	
	
	
		.time {
			color: #FFF4FA;
		}
	
		.location {
			color: #FFF4FA;
		}
	
		.photo_title {
			background: none;
	
			.ellipsis2 {
				color: #FFF4FA;
			}
		}
	
		.status_row {
			color: #FFF4FA;
		}
	
		.pic_tab {
			border-bottom: #B69857;
			color: #FFF4FA;
		}
	
		.drop_menu {
			background: linear-gradient(90deg, #F4A565, #EA8736);
			// background: none;
			.sort_row li {
				border: 1px solid rgba(255, 230, 189, .2);
				color: #fff;
			}
	
			.piciconfont {
				// border: 1px solid #B69857;
			}
	
			.list_style li {
				color: #e9e9e9e9;
	
				i {
					border: 1px solid rgba(255, 230, 189, .2);
					color: #fff;
				}
			}
	
			.list_style .on {
				color: #fff;
			}
		}
	
		.tab_area {
			background: none;
	
			color: #FFF4FA;
		}
		.tab_area.sticky_is{
			background: linear-gradient(90deg, #F4A565, #EA8736);
		}
		/deep/ {
			.u-tabs__wrapper__nav__item__text {
				color: #FFF4FA !important;
			}
	
			.u-tabs__wrapper__nav__line {
				background: #FFF4FA !important;
			}
		}
	
	}
	
	
	// 主题7
	.photo_content.theme_7 {
		.photo_contentbox {
			background: url('../../static/themeback_6.png');
			
			
	
		}
	
	
	
		.pic_type {
			.type_item {
				color: #e9e9e9;
			}
	
			.type_item.on {
				color: #fff;
			}
		}
	
		.load_all {
			color: #FFF4FA;
			// background-color: #6F552F;
		}
	
		.title.popup {
			.status_row {
				color: #919499;
			}
		}
	
		#right_bar {
			color: #fe4161;
			background: linear-gradient(180deg, #fff5f5, #FFA6A3);
	
			.fold_list {
				background: none;
			}
	
			.piciconfont {
				font-size: 44rpx;
			}
	
			/deep/ {
				.u-icon__icon {
					color: #fe4161 !important;
				}
			}
	
		}
	
		;
	
		.list_wrapper,
		.Waterfall_flow,
		.list_montage,
		.time_sorting {
			background: url('../../static/bg_6.png');
			background-size: 100% 100%;
			min-height: 50vh;
		}
	
		.drop_menu {
			// background: linear-gradient(180deg, #E47B89, #FFA6A3);
			background-color: #FFA6A3;
		}
	
		.time {
			color: #FFF4FA;
		}
	
		.location {
			color: #FFF4FA;
		}
	
		.photo_title {
			background: none;
	
			.ellipsis2 {
				color: #FFF4FA;
			}
		}
	
		.status_row {
			color: #FFF4FA;
		}
	
		.pic_tab {
			border-bottom: #B69857;
			color: #FFF4FA;
		}
	
		.drop_menu {
			.sort_row li {
				border: 1px solid rgba(255, 230, 189, .2);
				color: #fff;
			}
	
			.piciconfont {
				// border: 1px solid #B69857;
			}
	
			.list_style li {
				color: #e9e9e9e9;
	
				i {
					border: 1px solid rgba(255, 230, 189, .2);
					color: #fff;
				}
			}
	
			.list_style .on {
				color: #fff;
			}
		}
	
		.tab_area {
			background: none;
			color: #FFF4FA;
		}
	
		.tab_area.sticky_is{
			background: #E47B89;
		}
		/deep/ {
			.u-tabs__wrapper__nav__item__text {
				color: #FFF4FA !important;
			}
	
			.u-tabs__wrapper__nav__line {
				background: #FFF4FA !important;
			}
		}
	
	}
	
	
	// 主题8
	.photo_content.theme_8 {
		.photo_contentbox {
			background: url('../../static/themeback_7.png');
			background-size: 100% 100%;
			
	
		}
	
	
	
		.pic_type {
			.type_item {
				color: #e9e9e9;
			}
	
			.type_item.on {
				color: #fff;
			}
		}
	
		.load_all {
			color: #FFF4FA;
			// background-color: #6F552F;
		}
	
		.title.popup {
			.status_row {
				color: #919499;
			}
		}
	
		#right_bar {
			color: #fff;
			background: linear-gradient(180deg, #3D62A3, #2D5399);
	
			.fold_list {
				background: none;
			}
	
			.piciconfont {
				font-size: 44rpx;
			}
	
			/deep/ {
				.u-icon__icon {
					color: #fff !important;
				}
			}
	
		}
	
		;
	
		.list_wrapper,
		.Waterfall_flow,
		.list_montage,
		.time_sorting {
			// background: url('../../static/bg_6.png');
			// background-size: 100% 100%;
			min-height: 50vh;
		}
	
		.drop_menu {
			// background: linear-gradient(180deg, #E47B89, #FFA6A3);
			background-color: #305397;
			.sort_row{
				
			
			.on_sort_row{
					    background: rgba(0, 108, 255, 0.1);
				}
			}
			
			.list_style{
				.on i{
					    background: rgba(0, 108, 255, 0.1);
				}
			}
		}
	
		.time {
			color: #FFF4FA;
		}
	
		.location {
			color: #FFF4FA;
		}
	
		.photo_title {
			background: none;
	
			.ellipsis2 {
				color: #FFF4FA;
			}
		}
	
		.status_row {
			color: #FFF4FA;
		}
	
		.pic_tab {
			border-bottom: #B69857;
			color: #FFF4FA;
		}
	
		.drop_menu {
			.sort_row li {
				border: 1px solid rgba(255, 230, 189, .2);
				color: #fff;
			}
	
			.piciconfont {
				// border: 1px solid #B69857;
			}
	
			.list_style li {
				color: #e9e9e9e9;
	
				i {
					border: 1px solid rgba(255, 230, 189, .2);
					color: #fff;
				}
			}
	
			.list_style .on {
				color: #fff;
			}
		}
	
		.tab_area {
			background: none;
			color: #FFF4FA;
		}
	
		.tab_area.sticky_is{
			background: #305397;
		}
		/deep/ {
			.u-tabs__wrapper__nav__item__text {
				color: #FFF4FA !important;
			}
	
			.u-tabs__wrapper__nav__line {
				background: #FFF4FA !important;
			}
		}
	
	}
	
	
	
	// 主题9
	.photo_content.theme_9 {
		.photo_contentbox {
			background: url('../../static/themeback_8.png');
			background-size: 100% 100%;
			
	
		}
	
	
	
		.pic_type {
			.type_item {
				color: #e9e9e9;
			}
	
			.type_item.on {
				color: #fff;
			}
		}
	
		.load_all {
			color: #FFF4FA;
			// background-color: #6F552F;
		}
	
		.title.popup {
			.status_row {
				color: #919499;
			}
		}
	
	#right_bar {
		color: #ffe6bd;
		background: linear-gradient(135deg, #e55b05, #c72402);
	
		.fold_list {
			background: none;
		}
	
		.piciconfont {
			font-size: 44rpx;
		}
	
		/deep/ {
			.u-icon__icon {
				color: #ffe6bd !important;
			}
		}
	
	};
	
		.list_wrapper,
		.Waterfall_flow,
		.list_montage,
		.time_sorting {
			// background: url('../../static/bg_6.png');
			// background-size: 100% 100%;
			min-height: 50vh;
		}
	
		.drop_menu {
			// background: linear-gradient(180deg, #E47B89, #FFA6A3);
			background: #AA1717;
		}
	
		.time {
			color: #FFF4FA;
		}
	
		.location {
			color: #FFF4FA;
		}
	
		.photo_title {
			background: none;
	
			.ellipsis2 {
				color: #FFF4FA;
			}
		}
	
		.status_row {
			color: #FFF4FA;
		}
	
		.pic_tab {
			border-bottom: #B69857;
			color: #FFF4FA;
		}
	
		.drop_menu {
			.sort_row li {
				border: 1px solid rgba(255, 230, 189, .2);
				color: #fff;
			}
	
			.piciconfont {
				// border: 1px solid #B69857;
			}
	
			.list_style li {
				color: #e9e9e9e9;
	
				i {
					border: 1px solid rgba(255, 230, 189, .2);
					color: #fff;
				}
			}
	
			.list_style .on {
				color: #fff;
			}
		}
	
		.tab_area {
			background: none;
			color: #FFF4FA;
		}
	
		.tab_area.sticky_is{
			background: #AA1717;
		}
		/deep/ {
			.u-tabs__wrapper__nav__item__text {
				color: #FFF4FA !important;
			}
	
			.u-tabs__wrapper__nav__line {
				background: #FFF4FA !important;
			}
		}
	
	}
	
	
	
	.photo_content.theme_10 {
		.photo_contentbox {
			background: url('../../static/themeback_9.png');
			background-size: 100% 100%;
			
	
		}
	
	
	
		.pic_type {
			.type_item {
				color: #e9e9e9;
			}
	
			.type_item.on {
				color: #fff;
			}
		}
	
		.load_all {
			color: #FFF4FA;
			// background-color: #6F552F;
		}
	
		.title.popup {
			.status_row {
				color: #919499;
			}
		}
	
	#right_bar {
		color: #fff;
		background: linear-gradient(135deg, #BACCAC, #99B991);
	
		.fold_list {
			background: none;
		}
	
		.piciconfont {
			font-size: 44rpx;
		}
	
		/deep/ {
			.u-icon__icon {
				color: #fff !important;
			}
		}
	
	};
	
		.list_wrapper,
		.Waterfall_flow,
		.list_montage,
		.time_sorting {
			// background: url('../../static/bg_6.png');
			// background-size: 100% 100%;
			min-height: 50vh;
		}
	
		.drop_menu {
			// background: linear-gradient(180deg, #E47B89, #FFA6A3);
			background: #98B88F;
		}
	
		.time {
			color: #FFF4FA;
		}
	
		.location {
			color: #FFF4FA;
		}
	
		.photo_title {
			background: none;
	
			.ellipsis2 {
				color: #FFF4FA;
			}
		}
	
		.status_row {
			color: #FFF4FA;
		}
	
		.pic_tab {
			border-bottom: #B69857;
			color: #FFF4FA;
		}
	
		.drop_menu {
			.sort_row li {
				border: 1px solid rgba(255, 230, 189, .2);
				color: #fff;
			}
	
			.piciconfont {
				// border: 1px solid #B69857;
			}
	
			.list_style li {
				color: #e9e9e9e9;
	
				i {
					border: 1px solid rgba(255, 230, 189, .2);
					color: #fff;
				}
			}
	
			.list_style .on {
				color: #fff;
			}
		}
	
		.tab_area {
			background: none;
			color: #FFF4FA;
		}
	
		.tab_area.sticky_is{
			background: #99B991;
		}
		/deep/ {
			.u-tabs__wrapper__nav__item__text {
				color: #FFF4FA !important;
			}
	
			.u-tabs__wrapper__nav__line {
				background: #FFF4FA !important;
			}
		}
	
	}
</style>

<style lang="scss">
	/* #ifdef H5 */
	.introduces-content>>>img {
		width: 100%;
	}

	/* #endif */
	.introduces-content {
		padding: 20px;

		/deep/ {
			* {
				width: 100%;
			}
		}
	}
</style>